<template>
  <z-card>
    <template #header>
      <z-filter-search :inputs="inputs" />
      <filter-operate />
    </template>
    <z-split-list
      :origninColumns="columns"
      :origninData="origninData"
      :total="total"
      :loading="loading"
      @page-change="onChangePage"
      @size-change="onPageSize"
    >
      <template #opt="{ row }">
        <z-button type="text" size="mini" @click.stop="onEdit(row)">编辑</z-button>
      </template>
      <template #detail="{ row }"><detail :row="row" /></template>
    </z-split-list>
  </z-card>
</template>

<script>
import ZCard from "@/components/ZBase/ZCard.vue";
import ZFilterSearch from "@/components/ZSearchFilter/ZFilterSearch.vue";
import ZSplitList from "@/components/ZBase/ZSplitList.vue";
import ZButton from "@/components/ZBase/ZButton.vue";
import { fetchPost } from "@/utils/requestModules/requestMethods";
import FilterOperate from "./components/FilterOperate.vue";
import Detail from "./components/detail/detail.vue";
import columns from "./columns";
export default {
  name: "homeTest",
  components: {
    ZCard,
    ZFilterSearch,
    ZSplitList,
    ZButton,
    Detail,
    FilterOperate,
  },
  data() {
    return {
      loading: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      columns,
      origninData: [],
      inputs: [
        {
          label: "姓名",
          name: "name",
          type: "text",
          value: "",
        },
        {
          label: "年龄",
          type: "text",
          name: "age",
          value: "",
        },
        {
          label: "开始时间",
          name: "start",
          type: "datetime",
          value: "",
        },
        {
          label: "结束时间",
          name: "end",
          type: "datetime",
          value: "",
        },
        {
          label: "是否及格",
          name: "tap",
          type: "select",
          options: [
            { label: "及格", value: 1 },
            { label: "不及格", value: 2 },
          ],
          value: "",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //页码改变
    onChangePage(v) {
      this.page.pageIndex = v;
      this.getData();
    },
    // 页数改变
    onPageSize(v) {
      this.page.pageSize = v;
      this.getData();
    },
    onEdit(row) {
      this.$createPopup({
        ctor: () => import("./components/ModelEdit.vue"),
        props: {
          row: row,
        },
      });
    },
    async getData() {
      this.loading = true;
      fetchPost("/getInfo", { ...this.page }).then((res) => {
        setTimeout(() => {
          this.total = res.data.total;
          this.origninData = res.data.list;
          this.loading = false;
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss"></style>
